<template>
    <div class="custom-bread-crumb">
        <Breadcrumb :style="{fontSize: `${fontSize}px`}">
            <!-- <transition-group name="breadcrumb"> -->
            <BreadcrumbItem :class="`ani-breadcrumb delay-${index}`" v-for="(item, index) in list" :key="`bread-crumb-${item.name}`" :to="item.to">
                <common-icon style="margin-right: 4px;" :type="item.icon || ''" /> {{ showTitle(item) }}

            </BreadcrumbItem>
            <!-- </transition-group> -->
        </Breadcrumb>
    </div>
</template>

<script>
    import {
        showTitle
    } from '_c/common/util'
    import CommonIcon from '_c/common-icon'
    import './custom-bread-crumb.less'
    export default {
        name: 'customBreadCrumb',
        components: {
            CommonIcon
        },
        props: {
            list: {
                type: Array,
                default: () => []
            },
            fontSize: {
                type: Number,
                default: 14
            },
            showIcon: {
                type: Boolean,
                default: false
            }
        },
        methods: {
            showTitle(item) {
                return showTitle(item, this)
            },
            isCustomIcon(iconName) {
                return iconName.indexOf('_') === 0
            },
            getCustomIconName(iconName) {
                return iconName.slice(1)
            }
        }
    }
</script>

<style>
    .ani-breadcrumb {
        animation-fill-mode: both;
        animation-duration: .5s;
        animation-name: breadcrumb;
        position: relative;

    }

    @keyframes breadcrumb {
        from {
            opacity: 0;
            left: 20px;
        }
        to {
            opacity: 1;
            left: 0;
        }
    }

    .delay-1{
        animation-delay: 0;
    }

    .delay-2{
        animation-delay: 200ms;
    }
    .delay-3{
        animation-delay: 300ms;
    }
</style>

